<template>
  <div class="course-container">
    <div class="d-flex flex-column slide-courses">
      <h2 class="course-h2 fs-md">推荐课程</h2>
      <div class="course-info" v-for="item in slideCoursesData.data" :key="item._id">
        <div class="course-img">
          <img src="../assets/default.jpg" alt="" lazyload="true" :data-original="item.image">
        </div>
        <p class="course-title fs-sm font-black">{{item.title}}</p>
        <div class="course-about d-flex">
          <div class="author-info">
            <img :src="item.author?.avatar" alt="" class="author-avatar">
            <span class="author-name font-light fs-sm">{{item.author?.name}}</span>
          </div>
          <div class="course-price">
            <span :class="item.price === 0 ? 'free':'expensive'">{{item.price === 0 ? '免费' : `￥${item.price}`}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  props: ['slideCoursesData'],
  setup (props) {
    onMounted(() => {
      setTimeout(() => {
        lazyload()
      }, 100)
    })
    // 图片懒加载
    function lazyload () {
      console.log('侧边栏执行')
      const scrollY = document.documentElement.scrollTop
      const offsetHeight = document.documentElement.offsetHeight
      const imgs = document.querySelectorAll('img[data-original][lazyload]')
      imgs.forEach(item => {
        if (item.dataset.original === '') {
          return
        }
        const rect = item.getBoundingClientRect()
        if (rect.bottom >= 0 && rect.top < scrollY + offsetHeight) {
          const img = new Image()
          img.src = item.dataset.original
          // console.log(img.src)
          img.onload = function() {
            item.src = img.src
          }
          item.removeAttribute('data-original')
          item.removeAttribute('lazyload')
        }
      })
    }
    document.addEventListener('scroll', lazyload)
  }
}
</script>

<style lang="scss" scoped>
.course-container {
  padding: 0 0 0 10px;
  margin-top: 2px;
  .slide-courses {
    padding: 13px 13px 15px;
    background-color: #f9f9f9;
    .course-h2 {
      height: 30px;
      line-height: 30px;
      margin: 0;
    }
    .course-info {
      margin-top: 15px;
      .course-img {
        width: 100%;
        height: auto;
        overflow: hidden;
        img {
          width: 100%;
          background-color: #ccc;
          transition: all 0.4s ease;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
      .course-title {
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
      .course-about {
        justify-content: space-between;
        .author-info {
          .author-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: relative;
            bottom: 1px;
          }
          .author-name {
            margin-left: 4px;
          }
        }
        .course-price {
          span {
            &.free {
              color: #15c288;
            }
            &.expensive {
              color: #fd9271;
            }
          }
        }
      }
    }
  }
}
</style>
